<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border: none;
        }
        .carousel{
            width: 600px;
            height: 300px;
            margin: 100px auto;
            border: 1px soild #000;
            position: relative;
            overflow: hidden;
        }
        .carousel .imageList ul{
            list-style: none;
            position: relative;
        }
        .carousel .imageList ul li{
            position: absolute;
            top: 0;
            left: 600px;
            width: 600px;
            height: 300px;
        }
        .carousel img{
            width: 600px;
            height: 300px;
        }
        .carousel .imageList ul li.first{
            left:0;
        }
        .btns a{
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            margin-top: -20px;
            background-color: yellow;
            z-index: 999;
        }
        .btns a.leftBtn{
            left: 10px;
        }
        .btns a.rightBtn{
            right: 10px;
        }


    </style>
  </head>
  <body>
      <div class="carousel" id="carousel">
          <div class="btns">
              <a href="javascript:;" class="leftBtn" id="leftBtn"></a>
              <a href="javascript:;" class="rightBtn" id="rightBtn"></a>
          </div>
          <div class="imageList">
              <ul>
                  <li class="first"><a href="#"><img src="images/0.jpg" alt=""></a></li>
                  <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                  <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                  <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
              </ul>
          </div>
      </div>

      <script src="./slider.js"> </script>
      <script>
            var slider = new Slider({
                'ID' : 'carousel',
                'autoplayinterval' : 500,
                'with' : 600
            });
      </script>
  </body>
</html>
